<template>
  <el-menu
    :default-active="activeIndex"
    mode="vertical"
    @select="handleSelect"
    router
    style="height:500px;border:0px"
  >
    <el-menu-item v-for="(item, i) in navItems" :key="i" :index="item.index">
      {{
        item.name
      }}
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "baseLefter",
  data() {
    return {
      activeIndex: "1",
      navItems: [
        {
          name: "🏠首页",
          index: "/",
        },
        {
          name: "Echart地图练习",
          index: "/echartMap",
        },
        {
          name: "Axios和Mock的练习",
          index: "/mock",
        },
        {
          name: "ECharts二次封装",
          index: "/echartData",
        },

      ],
    };
  },
  methods: {
    handleSelect(key: string, keyPath: string) {
      console.log(key, keyPath);
    },
  },
});
</script>